<div class="card border-light p-4 bg-primary bg-opacity-10">
    <div class="text-danger"></div>
    <h5>Add new comment</h5>
    <div class="row">
        <div class="col mt-2">
            <form [formGroup]="commentForm">
            <div class="form-group">
                <label class="form-label" name="Commentary.Text">Commentary</label>
                <textarea class="form-control" id="comment" placeholder="Type in your commenary" formControlName="text"
                [ngClass]="{'is-invalid': (validErrors$ | async)?.Text}"></textarea>
                <div class="invalid-feedback" *ngIf="(validErrors$ | async)?.Text"> {{ (validErrors$ | async).Text }}</div>
            </div>
            <button type="submit" [disabled]="!buttonState" (click)="onSubmit()" class="btn btn-primary mt-2">Post comment</button>
        </form>
        </div>  
    </div>
</div>